<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="主页demo/js/jquery-3.6.0.min.js"></script>
		
		<link rel="stylesheet"  href="css/base.css"/>
		<style>
			.xl{
				width: 200px;
				margin: 0px auto;
				overflow: hidden;
				position: relative;
			}
			.xl-menu{
				width: 200px;
				height: 30px;
				border: 1px solid red;
				z-index: 1;
				background-color: white;
				position: relative;
			}
			.xl-item{
				width: 200px;
				height: 100px;
				border: 1px solid red;
				transition:all 0.5s ease-in-out;
				z-index: -1;
				
				
			}
			/* 控制下拉框移入移出 */
			.yr{
				margin-top: -100px;
			}
			.yc{
				margin-top:0px ;
			}
		</style>
	</head>
	<body>
		
		<div class="xl" index=0>
			<div class="xl-menu">
				下拉菜单
			</div>
			<div class="xl-item ">
				1
			</div>
		</div>
		<div class="xl" index=0>
			<div class="xl-menu">
				下拉菜单
			</div>
			<div class="xl-item ">
				1
			</div>
		</div>
		<div class="xl" index=0>
			<div class="xl-menu">
				下拉菜单
			</div>
			<div class="xl-item ">
				1
			</div>
		</div>
		<div class="xl" index=0>
			<div class="xl-menu">
				下拉菜单
			</div>
			<div class="xl-item ">
				1
			</div>
		</div>
		
		
		<script>
			$(function(){
				$(".xl-menu").each(function(index,el){
					$(this).click(function(){
							
						if($(this).parents(".xl").attr("index")!=0){
							$(this).siblings(".xl-item").removeClass("yr")
							$(this).siblings(".xl-item").addClass("yc")
							// setTimeout(function(){
							// 	$(this).siblings(".xl-item").css("display","none")
							// },500)
							
							$(this).parents(".xl").attr("index","0")
							
						}
						else{
							$(this).siblings(".xl-item").removeClass("yc")
							$(this).siblings(".xl-item").addClass("yr")
							// setTimeout(function(){
							// 	$(this).siblings(".xl-item").css("display","block")
							// },500)
							$(this).parents(".xl").attr("index","1")
						}
						// $(".xl-item").eq(index).css("margin-top","-100px")
						// $(".xl-item").eq(index).children().css("display","none")
					})
				})
			})
		</script>
	</body>
</html>
